<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>抽奖奖品表</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="js/dropzone/min/basic.min.css" />
    <link rel="stylesheet" href="js/dropzone/min/dropzone.min.css" />

</head>
<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header"><h4>抽奖奖品</h4></div>
                <div class="card-body">
                        <!--奖品表按钮-->
                        <div class="tab-pane fade active in" id="home">
                            <form class="form-inline" method="post" id="searchUserForm">
                                <div class="form-group">
                                    <label>奖品名称:</label>
                                    <input type="text" class="form-control" name="prizeName">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-info btn_query btn-round" type="button" id="searchPrizeFormBtn">查询</button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success btn_query btn-round" type="button" id="addBtn">添加</button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-warning btn_query btn-round" type="button" id="editBtn">编辑</button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-danger btn_query btn-round" type="button" id="deleteBtn">删除</button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-purple btn_query btn-round" type="button" id="RefreshBtn">刷新</button>
                                </div>
                            </form>
                            <table id="tb_prize"></table>
                        </div>
                </div>
            </div>
        </div>

    </div>


    <!-- 奖品表-添加与编辑模态框 -->
    <div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div id="error_tips" style="color: #c9302c"></div>
                </div>
                <div class="modal-body">
                    <form id="addOrEditForm" method="post" action="/lottery/remote/prize/addOrEditcontac" enctype="multipart/form-data" >
                        <input type="hidden" class="form-control" id="id" name="id" required>
                        <input type="hidden" class="form-control" id="version" name="version" >
                        <div class="row">
                            <div class="col-xs-12">
                                <label for="prizeNames" class="control-label">奖品名称：</label>
                                <input type="text" class="form-control" id="prizeNames" name="prizeName" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label for="prizeImg" class="control-label">奖品图片：点击添加图片</label>
                                <input type="hidden" name="prizeImg" id="prizeImg" >
                                <div id="example-dropzone" class="dropzone"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">奖品类型：</label>
                            <div>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="prizeType" value="0"/>积分</label>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="prizeType" value="1"/>实物</label>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="prizeType" value="2"/>会员</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">奖品状态：</label>
                            <div>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="prizeState" value="0"/>关闭</label>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="prizeState" value="1"/>开启</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label for="prizeResidue" class="control-label">奖品剩余个数：</label>
                                <input type="text" class="form-control" id="prizeResidue" name="prizeResidue" onkeyup="clearNoNum(this)" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label for="prizeProbability" class="control-label">配置积分比例：</label>
                                <input type="text" class="form-control" id="prizeProbability" name="prizeProbability" onkeyup="clearNoNum(this)" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label for="prizeIntegral" class="control-label">需要积分：</label>
                                <input type="text" class="form-control" id="prizeIntegral" name="prizeIntegral"  onkeyup="clearNoNum(this)" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label for="prizeMemberName" class="control-label">特定中奖会员名称：</label>
                                <input type="text" class="form-control" id="prizeMemberName" name="prizeMemberName" >
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" id="subtn" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!-- bootstrap表单验证插件 -->
<script type="text/javascript" src="js/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<!-- jquery-form表单提交插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.form.js"></script>
<!-- bootstrap弹出框插件 -->
<script type="text/javascript" src="js/jquery.bootstrap.min.js"></script>

<!-- 表单填充插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.formloader.js"></script>

<script type="text/javascript" src="js/zero2one/zero2one.version.js"></script>
<script type="text/javascript" src="/js/zero2one/zero2one.core.js"></script>
<script type="text/javascript" src="js/dropzone/min/dropzone.min.js"></script>
<!--上传图片插件-->
<script type="text/javascript" src="js/zero2one/zero2one.drop.js"></script>
<!--消除数字以外的字符插件-->
<script type="text/javascript" src="js/inputmoney.js"></script>
<!-- ckeditor富文本插件 -->
<script src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>

<script type="text/javascript">


    //加载首奖品表信息列表
    var columns2 = [
        {checkbox: true},
        {field: 'id',title: '奖品id',visible:false},
        {field: 'prizeName',title: '奖品名称'},
        {field: 'prizeImg',title: '奖品图片',formatter: function (value, row, index) {
                if (value==null||value==''){
                    return '无图片'
                }else {
                    return "<img style='width: 80px' src='"+value+"'/>";
                }
            }},
        {field: 'prizeType',title: '奖品类型',formatter: function (value, row, index) {
                if (value=='0') {
                    return "积分";
                }else if(value=='1'){
                    return "实物";
                }else if(value=='2'){
                    return "会员";
                }
            }},
        {field: 'prizeState',title: '奖品状态',formatter: function (value, row, index) {
                if (value=='0') {
                    return "<button class=\"btn btn-danger btn-sm\">关&nbsp;&nbsp;闭</button>";
                }else if(value=='1'){
                    return "<button class=\"btn btn-success btn-sm\">开&nbsp;&nbsp;启</button>";
                }
            }},
        {field: 'creationTime',title: '创建时间', formatter: function (value) {
                return zero2one.dateFormat(value, 'Y-m-d H:i:s')
            }},
        // {field: 'prizeNum',title: '中一次获得数量'},
        {field: 'prizeResidue',title: '奖品剩余个数'},
        {field: 'prizeProbability',title: '配置积分比例',formatter: function (value) {
                return value+" %";
            }},
        {field: 'prizeIntegral',title: '需要积分'},
        {field: 'prizeNeed',title: '中奖需要达到点击数'},
        {field: 'prizeHave',title: '已击人数'},
        {field: 'prizeMemberName',title: '特定中奖会员名称'}
    ];

    //进入主界面加载数据
    zero2one.datagrid("tb_prize", "/lottery/remote/prize/list",function (params) {
        return $.extend(zero2one.tableInitParam(params), zero2one.form2json("searchUserForm"));
    }, columns2);

    //点击查询按钮重新加载页面数据
    $("#searchPrizeFormBtn").click(function () {
        $('#tb_prize').bootstrapTable('refresh');
    });

    //上传图片
    zero2one.drop("example-dropzone","prizeImg");

    //清除选中行
    function dji(tableId) {
        $('#'+tableId).bootstrapTable("uncheckAll");
    }

    //点击添加按钮弹出模态框
    $("#addBtn").click(function () {
        $("#example-dropzone").empty();//清空图片
        //清空表单数据
        $("#addOrEditForm")[0].reset();
        $(":radio[name='prizeType'][value='0']").prop("checked", "checked");
        $(":radio[name='prizeState'][value='0']").prop("checked", "checked");
        $("#addOrEditModal").modal("show");
    });


    //点击编辑按钮弹出模态框
    $("#editBtn").click(function () {
        //获取选中行的数据
        var datas = $('#tb_prize').bootstrapTable('getSelections');

        //判断是否选中行数据，如果没有则提示
        if(datas.length == 1){

            //回显图片
            $("#example-dropzone").empty();
            var dropz = Dropzone.forElement('#example-dropzone');//获取Dropzone元素节点
            //创建模拟文件
            var mockFile = {
                name: datas[0].prizeImg , //显示的文件名
                accepted:true
            };
            dropz.emit("addedfile", mockFile);
            //图片地址
            var imageUrl =datas[0].prizeImg;
            //生成缩略图
            dropz.emit("thumbnail", mockFile,imageUrl);
            //完成（如果没有，缩略图上会有一根进度条一直存在）
            dropz.emit("complete", mockFile);

            //填充表单
            $("#addOrEditForm").formloader({data: datas[0]});
            $(":radio[name='prizeType'][value='" + datas[0].prizeType + "']").prop("checked", "checked");
            $(":radio[name='prizeState'][value='" + datas[0].prizeState + "']").prop("checked", "checked");
        }else{
            $.messager.alert("温馨提示", "请选择一条数据操作");
            return;
        }
        $("#addOrEditModal").modal("show");
    });

    //保存按钮的点击事件
    $("#subtn").click(function () {
        zero2one.request("/lottery/remote/prize/addOrEditcontac",$("#addOrEditForm").serialize(),function (data) {
            if (data.success) {
                window.location.reload();
            }else {
                $.messager.alert("温馨提示", data.msg)
            }
        });
    });

    //点击删除按钮弹出模态框
    $("#deleteBtn").click(function () {
        //获取选中行的数据
        var datas = $('#tb_prize').bootstrapTable('getSelections');
        if(datas.length > 0){
            $.messager.confirm("温馨提示", "您确定要删除选中的数据吗?", function () {
                $.post("/lottery/remote/prize/delete", {"ids" : zero2one.array2str(datas)},
                    function(data){
                        if (data.success) {
                            window.location.reload();
                        } else {
                            $.messager.alert("温馨提示", data.msg);

                        }
                    }, "json");
            })
        }else{
            $.messager.alert("温馨提示", "请至少选择一条数据操作");

        }
    });

    //刷新按鈕点击事件
    $("#RefreshBtn").click(function () {
        $.messager.confirm("刷新", "您是否要刷新?", function () {
        zero2one.request("/lottery/remote/prize/prizeRefresh",$("#addOrEditForm").serialize(),function (data) {
            if (data.success) {
                //固定显示当前表
                $('#tb_prize').bootstrapTable('refresh');//刷新表
                $("#addOrEditModal").modal("hide");//隐藏模态框
            }else {
                $.messager.alert("温馨提示", data.msg)
            }
        });
        })
    });



</script>

</body>
</html>
